<!-- 车场管理路内收费规则配置 -->

<template>
    <div>
        <HeadSearch @handleDialogOpen="handleDialogOpen" @searchCurb="searchCurb" @deleteCurbList="deleteCurbList">
        </HeadSearch>
        <TableList @handleEditDialogOpen="handleEditDialogOpen" @deleteCurb="deleteCurb"
            @deleteCurbList="deleteCurbList" :tableData="filtersData"></TableList>
        <Paging></Paging>
        <AddCurbCard @addCurb="addCurb" @handleDialogOpen="handleDialogOpen" :dialogFormVisible="dialogFormVisible">
        </AddCurbCard>
        <EditModal @updateCurb="updateCurb" @handleEditDialogOpen="handleEditDialogOpen"
            :editDialogFormVisible="editDialogFormVisible" :updateList="updateList">
        </EditModal>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, watchEffect, onMounted } from 'vue'

import HeadSearch from '@/components/headSearch.vue';
import Paging from '@/components/paging.vue';
import AddCurbCard from './components/addCurbModal.vue'
import TableList from './components/tableList.vue'
import EditModal from './components/editModal.vue'

interface User {
    id: number,
    date: string
    name: string
    address: string
}

const dialogFormVisible: { value: boolean } = ref(false);
const editDialogFormVisible: { value: boolean } = ref(false);
const updateList: any = reactive({})

const tableData = ref([
    {
        id: 1,
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 2,
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 3,
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 4,
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 5,
        date: '2016-05-08',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 6,
        date: '2016-05-06',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        id: 7,
        date: '2016-05-07',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
const filtersData: any = ref([])

onMounted(() => {
    // 在这里进行数据获取或赋值操作
    filtersData.value = tableData.value
});
// 查询
const searchCurb = (searchKey: string) => {
    filtersData.value = tableData.value.filter(tab => tab.name.includes(searchKey));
}
// 新增
const addCurb = (obj: any) => {
    // console.log(obj)
    tableData.value.push(obj)
    filtersData.value = tableData.value
}
// 修改
const updateCurb = (obj: any) => {
    // console.log(obj);
    const { id } = obj
    tableData.value = tableData.value.map(tab => {
        if (tab.id == id) {
            return {
                ...obj
            }
        }
        return tab
    })
    filtersData.value = tableData.value
    console.log(filtersData.value, tableData.value);

}
// 删除
const deleteCurb = (obj: any) => {
    const { id } = obj
    tableData.value = tableData.value.filter(tab => tab.id != id);
    filtersData.value = tableData.value;
}
// 批量删除
const deleteCurbList = (arr: any) => {
    // // const newArr = arr.map(a => a.id)
    // const newArr = [1,2]
    // // console.log(newArr);
    // tableData.value = tableData.value.filter(tab => {
    //     console.log(newArr.filter(child => child = tab.id));
        
    //    return newArr.filter(child => child == tab.id);
    // });
    // filtersData.value = tableData.value;
    // console.log(tableData.value, 'filtersData.value');

}
// 新增框
const handleDialogOpen = (val: boolean) => {
    dialogFormVisible.value = val;
}
// 编辑框
const handleEditDialogOpen = (val: boolean, obj: any) => {
    editDialogFormVisible.value = val;
    Object.assign(updateList, obj);
}
</script>